<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>机构列表</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/jquery.js"></script>

    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        h3 a{
            text-decoration: none;
            color: black;
        }
    </style>
</head>
<body>
<h3>
    <a href="">库存查询</a>
</h3>
<div id="app">
<!--    搜索栏-->
<template>
    <el-form>
        <el-radio-group v-model="direction">
            <el-radio label="ltr">从左往右开</el-radio>
            <el-radio label="rtl">从右往左开</el-radio>
            <el-radio label="ttb">从上往下开</el-radio>
            <el-radio label="btt">从下往上开</el-radio>
        </el-radio-group>
    </el-form>
   </template>
    <template>
        <div >
        <el-form>
            <el-button @click="drawer = true" icon="el-icon-d-arrow-right"
                       style="margin-left: -16px; width: 20px; margin-top: 10px; margin-bottom: 10px;"
                       size="mini">

            </el-button>
        </el-form>
        </div>
    </template>
    <template>
        <el-form>
            <el-drawer
                    title="现有货架表单"
                    :visible.sync="drawer"
                    model="false"
                    :direction="direction"
                    :before-close="handleClose"
                    >
                <span>我来啦!</span>
                <el-tree :data="twar" :props="defaultProps"></el-tree>
                <el-button  @click="drawer = false"
                            icon="el-icon-d-arrow-left"
                            style="margin-left: 92%; width: 20px; margin-top: 10px; margin-bottom: 10px;"
                            size="mini">
                </el-button>
            </el-drawer>
            <el-select v-model="stockn"
                       multiple
                       filterable
                       allow-create
                       default-first-option
                       @change="sonChange(stockn)"
                       placeholder="请选择文章标签">
                <el-option
                        v-for="item in stocks"
                        :key="item.stockn"
                        :label="item.iomGoods"
                        :value="item.iomGoods">
                </el-option>
            </el-select>
            <el-select v-model="stockA"
                       multiple
                       filterable
                       allow-create
                       default-first-option
                       @change="sheChange(stockA)"
                       placeholder="请选择文章标签">
                <el-option
                        v-for="item in stocks"
                        :key="item.stockA"
                        :label="item.iomGoodsno"
                        :value="item.iomGoodsno"
                        >
                </el-option>
            </el-select>
            <el-select v-model="stock"
                       multiple
                       filterable
                       allow-create
                       default-first-option
                       @change="sBnChange(stockB)"
                       placeholder="请选择文章标签">
                <el-option
                        v-for="item in stocks"
                        :key="item.stock"
                        :label="item.iomName"
                        :value="item.iomName">
                </el-option>
            </el-select>
            <el-button type="primary" icon="el-icon-search" @click="save()">查询</el-button>
        </el-form>
    </template>
<!--   表单区域-->
    <template>
        <el-table style="width: 100%"
                  :data="stocks"
                  ref="siteTable"
                  align="center">
            <el-table-column label="商品编号" align="center" width="180">
                <template slot-scope="scope">
                    <div v-for="(item,index) in stocks[scope.$index].commodities" :key="index">
                   {{scope.row.commodities[index].pnumber}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="商品名称" align="center" width="180">
                <template slot-scope="scope">
                        {{scope.row.iomGoods}}
                </template>
            </el-table-column>
            <el-table-column label="仓库编号" align="center" width="180">
                <template slot-scope="scope">
                    <div v-for="(item,index) in stocks[scope.$index].tmenus" :key="index">
                        {{scope.row.tmenus[index].wareNo}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="仓库名称" align="center" width="180">
                <template slot-scope="scope">
                        {{scope.row.iomName}}
                </template>
            </el-table-column>
            <el-table-column label="入库时的批次" align="center" width="180">
                <template slot-scope="scope">
                    {{scope.row.iomNo}}
                </template>
            </el-table-column>
            <el-table-column label="现有数量" align="center" width="180">
                <template slot-scope="scope">
                    <div v-for="(item,index) in stocks[scope.$index].tcargos" :key="index">
                        {{scope.row.tcargos[index].productNum}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                <el-button size="mini"  icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">详情
                </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="提示"
                :visible.sync="dialogVisible"
                width="30%">
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
        </el-dialog>
        <div class="block" style="margin-top: 10px;">
            <el-pagination @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="page_size"
                           :page-size="4"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="count"
                           :background="back">
            </el-pagination>
        </div>
        </el-dialog>
    </template>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data(){
            return{
                // 当前页数
                currentPage: 1,
                // 订单总数
                count : 0,
                // 每页的数据
                page_size : [6,3],
                // 当前每页的数据
                pageSize : 6,
                // 分页背景
                back: true,
                stocks: [],
                stock:{},
                stockn:{},
                stockB:{},
                stockA:{},
                //动态参数
                iomName:null,
                iomGoods:null,
                iomGoodsno:null,
                //移库
                tioWarehouses: [],
                timoWarehouses:[],
                stiock: {},
                dialogFormVisible: false,
                flag: 0,
                stockss:[],
                twar:[],
                dialogVisible: false,
                drawer: false,
                direction: 'ltr',
                defaultProps:{
                    children: 'tiomWarehouses',
                    label: 'iomName',

                    // children: 'stocks',
                    // label: 'iomName',
                },
            }
        },
        methods:{
            shelveChange(val){
                if (val == ""){
                    this.iomName = null;
                }else {
                    this.iomName = val;
                    console.log(this.iomName)
                }
            },
            sheChange(val){
                console.log(val);
                if (val == ""){
                    this.iomGoodsno = null;
                }else {
                    this.iomGoodsno = val;
                    console.log(this.iomGoodsno)

                }
            },
            sonChange(val){
                console.log(val);
                if (val == ""){
                    this.iomGoods = null;
                }else {
                    this.iomGoods = val;
                    console.log(this.iomGoods)

                }
            },
            sBnChange(val){
                console.log(val);
                if (val == ""){
                    this.iomName = null;
                }else {
                    this.iomName = val;
                    console.log(this.iomName)

                }
            },
            //侧面抽屉
            // handle(){
            //     this.drawer = false;
            // },
            saveOrgan(){
                axios.get("/twar")
                    .then(res => {
                        this.twar = res.data;
                        console.log(this.twar);
                    })
            },
            handleClose(stocks) {
                this.drawer = false;
            },
            //树形

            // 加载库存信息
            loadOrgans(){
                axios.get("/stocks/"+this.currentPage+"/"+this.pageSize+"?iomGoods="+this.iomGoods+"&&iomName="+this.iomName+"&&iomGoodsno="+this.iomGoodsno)
                    .then(res => {
                        this.stocks = res.data.data;
                        this.count = res.data.count;
                        console.log(this.stocks);
                    })
            },
           find(){
              axios.get("/tIo")
                   .then(res => {
                       this.menus = res.data;
                   })
           },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadOrgans();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadOrgans();
            },
            // 详情信息
            handleEdit(index, row) {
                // this.dialogVisible = true;
                console.log(row);
                axios.get("/stock/"+row.id)
                    .then(res =>{
                        this.stockss = res.data;
                        console.log(this.stockss);
                        console.log(this.stockss.iomGoods);
                        // console.log(this.stockss.commoditie.pnumber);
                        const h = this.$createElement;
                        this.$msgbox({
                            title: '信息',
                            message: h('p', null, [
                                h('span',null, ' 商品编号:  ========'),
                                h('i', { style: 'color: teal' }, this.stockss.iomCargoloca),
                                h('span',null, ' 仓库名称:  ========'),
                                h('i', { style: 'color: teal' }, this.stockss.iomName),
                                h('span',null, ' 仓库负责人:  ========'),
                                h('i', { style: 'color: teal' }, this.stockss.iomArea),
                                h('span',null, '  批次:  ====='),
                                h('i', { style: 'color: teal' }, this.stockss.iomNo),
                                h('span',null, ' 商品名称:========'),
                                h('i', { style: 'color: teal' }, this.stockss.iomGoods),
                                h('span',null, ' 仓库编号:============'),
                                h('i', { style: 'color: teal' }, this.stockss.id),
                                // h('span',null, ' 联系电话:========'),
                                // h('i', { style: 'color: teal' }, this.stockss.tmenu.telephone),
                            ],),
                            showCancelButton: true,
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            beforeClose: (action, instance, done) => {
                                if (action === 'confirm') {
                                    instance.confirmButtonLoading = true;
                                    instance.confirmButtonText = '执行中...';
                                    setTimeout(() => {
                                        done();
                                        setTimeout(() => {
                                            instance.confirmButtonLoading = false;
                                        }, 300);
                                    }, 3000);
                                } else {
                                    done();
                                }
                            }
                        }).then(action => {
                            this.$message({
                                type: 'info',
                                message: 'action: ' + action
                            });
                        });

                    });

            },
            save(){
                this.loadOrgans();
            },
            //清空修改角色模态框数据
            closeDialog() {
                this.flag = 0;
                this.site = {};
            },
        },
        mounted(){
            this.loadOrgans();
            this.saveOrgan();
        }
    });
</script>
</html>